<template>
  <page class="app-container">
    <TitleBar
      title="账户设置"
      refresh
    />
    <div class="maxbox">
      <div class="minbox">
        <div class="min_top">
          <el-form>
            <el-form-item :required="true">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :data="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                 :src="imageUrl!=''? imageUrl:this.isshow=false"
                  class="avatar"
                >
                <i
                   v-if="isshow"
                  class="el-icon-plus avatar-uploader-icon"
                />
                <!-- <el-button
                  size="small"
                  type="primary"
                >点击上传</el-button> -->
                <el-button size="small" type="primary" style="position: absolute; top: 160px; left: 50%;transform: translateX(-50%);">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <div class="min_cont">
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :rules="newUserRule"
            :model="formLabelAlign"
          >
            <el-form-item
              prop="name"
              label="用户名"
            >
              <el-input
                v-model.trim="formLabelAlign.name" disabled
                placeholder="admin"
              />
            </el-form-item>
            <el-form-item
              prop="email"
              label="Email"
            >
              <el-input
                v-model.trim="formLabelAlign.email"
                placeholder="213"
              />
            </el-form-item>
            <el-form-item
              prop="passa"
              label="旧密码"
            >
              <el-input type="password" v-model.trim="formLabelAlign.passa" />
            </el-form-item>
            <el-form-item
              prop="passb"
              label="新密码"
            >
              <el-input type="password" v-model.trim="formLabelAlign.passb" />
            </el-form-item>
            <el-form-item
              prop="passc"
              label="确认密码"
            >
              <el-input type="password" v-model.trim="formLabelAlign.passc" />
            </el-form-item>
            <el-button
              type="primary"
              @click="tijiao"
            >提交</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </page>
</template>

<script>
import { update, getAdmin } from '../../../api/homeLog.js'
import { getCode } from '@/utils/auth'
import config from '@/settings'
export default {
  data() {
    return {
      uploadUrl: config.uploadUrl,
      Newsurl: '',
      fileList: [],
      token: {
        type: '6',
        whether: false
      },
      fileList: [],
      isshow :false,
      labelPosition: 'right',
      imageUrl: '',
      formLabelAlign: {
        name: '',
        email: '',
        passa: '',
        passb: '',
        passc: ''
      },
      // 正则判断
      newUserRule: {
        name: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,20}$/.test(value) == false) {
                callback(new Error('用户名由4-20位组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (
                /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(
                  value
                ) == false
              ) {
                callback(new Error('邮箱数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        passa: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        passb: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        passc: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else if (value !== this.formLabelAlign.passb) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      getAdmin({code: getCode().code}).then(res=>{
        this.initList = res.data;
        this.imageUrl = this.initList.avatar;
        this.formLabelAlign.name = this.initList.name;
        this.formLabelAlign.email = this.initList.email;
      })
    },
    // 文件上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.Newsurl = res.data.Url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 0.2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 200KB!')
      }
      return isJPG && isLt2M
    },

    // 用户信息提交
    tijiao() {
      if (this.Newsurl != '') {
        update({
          avatar: this.Newsurl,
          email: this.formLabelAlign.email,
          passwordOld: this.formLabelAlign.passa,
          passwordNew: this.formLabelAlign.passb,
          passwordNewCo: this.formLabelAlign.passc,
          code: getCode().code
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              showClose: true,
              message: '参数修改成功，将返回首页！',
              type: 'success'
            })
            this.$router.replace('/home')
          } else {
            this.$message.error('请求有误！');
          }
        })
      } else {
       this.$message({
          message: '请上传图片，或填写更改信息！',
          type: 'warning'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .dashboard-text {
    margin-bottom: 90px;
  }
  .maxbox {
    margin: 0;
    padding: 0;
    width: 971px;
    margin: auto;
    border: 1px solid #f2f2f2;
    box-shadow: #ccc 0px 0px 3px 1px;
    .minbox {
      margin: 0;
      padding: 0;
      padding: 57px 232px 48px 239px;
      .min_top {
        img {
          margin-left: 176px;
          width: 142px;
          height: 130px;
          border-radius: 50%;
          margin-bottom: 44px;
        }
        span {
          display: block;
          text-align: center;
          font-size: 14px;
          color: #488dff;
          margin-bottom: 56px;
          width: 58px;
          height: 14px;
          margin-left: 216px;
          font-size: 14px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(72, 141, 255, 1);
        }
      }
      .min_cont {
        form {
          margin: 0;
          padding: 0;
          label {
            float: left;
            width: 63px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            margin-right: 22px;
            text-align: right;
            color: #333;
            margin-bottom: 19px;
          }
          input {
            float: left;
            margin-bottom: 19px;
            width: 413px;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
          }
          button {
            margin: 19px 0 0 195px;
            width: 100px;
            height: 40px;
            border: 0;
            background: rgba(72, 141, 255, 1);
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>

